<template>
<div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
				<div class="twoBox">
					<div class="activityData" >
						<el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
							<el-form-item label="" prop="keyword">
								<el-input v-model="queryParams.keyword" placeholder="投注对象/姓名/手机号" clearable
									@keyup.enter.native="handleQuery" />
							</el-form-item>
							<el-form-item label="投注结果：" prop="status">
								<el-select v-model="queryParams.status" placeholder="请选择" >
									<el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item> 
							<el-form-item>
								<el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
							</el-form-item>
						</el-form>
            <div>
              <export-excel-button
                title="冠军竞猜投注明细"
                action="/guess/activity/champion/bet/record/export"
                :params="ExportParams"
              />
            </div>
					<ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
							@pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
							<template v-slot:fee="{ scope }">
								<p v-if="scope.row.feeType == 1">{{scope.row.fee}}coin</p>
								<p v-if="scope.row.feeType == 2">￥{{scope.row.fee}}</p>
							</template>
						</ex-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
  championRecordList ,
} from '@/api/blindBox/quizConfigTwo'
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  name: "shopDetail",
  components: {
    ExportExcelButton
  },
  props: {
    id: String,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      examplesVisible: false,
      configurationVisible: false,
      tableData:[],
      statusList:[
          {id: '',value: '全部',},
          {id: '1',value: '待揭晓',},
          {id: '2',value: '竞猜成功',},
          {id: '3',value: '竞猜失败',},
        ],
      queryParams: {
        guessActivityId: '',
        keyword: '',
        status: '',
      },
      value1: '',
      tableColumn: [{
            prop: "customerName", 
            label: "姓名"
          },
          {
            prop: "customerPhone",
            label: "手机号",
            width: 100
          },
          {
            prop: "teamName",
            label: "投注对象"
          },
          {
            prop: "betOdds",
            label: "赔率"
          },
           {
            prop: "betAmount",
            label: "投注积分"
					},
					{
            prop: "betTime",
            label: "投注时间"
          },
           {
            prop: "statusStr",
            label: "结果"
          },
          {
            prop: "issueAmount",
            label: "预计发放积分",
          },
        ],
    };
  },
  watch: {
   
  },
  computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
          ...this.pageOptions,
        };
        return params;
      },
    },
  created() {
    this.queryParams.guessActivityId = this.$route.query.guessActivityId
    this.getList()
  },
  mounted() {
  
  },
  methods: {
    /** 查询盲盒开奖名单*/
    getList() {
      this.loading = true;
      var data = {
        ...this.pageOptions,
        ...this.queryParams,
      }
      championRecordList(data).then(response => {
        const {records ,total} = response.result
        console.log('response',response)
        this.tableData = records
        this.$refs.table.pageOptions.total = total;
        this.loading = false;
      });
    },
  
    handleConfiguration(row){
      this.configurationVisible = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.$refs.table.pageOptions.pageNum)
      this.handleQuery();
    },
    /* 删除 */
    handleExamples(id) {
      this.examplesVisible = true
    },
    _handleSuccess(){
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
</style>
